import React, { useEffect, useState } from 'react';
import Table from '@knownsec/react-component/dist/Table';
import PropTypes from 'prop-types';
import Pagination from '@knownsec/react-component/dist/Pagination';
import { useQuery } from '@apollo/client';
import { queryGQLBuilder } from '../fieldsFrag';
import { searchStringBuilder } from '@kuiper-components/page-table';
import EmptyData from '../../../../../components/empty/EmptyData';
import s from '../style.module.css';
import cn from 'classnames'
import { getParams } from '../../../../../helpers/getUrlParams';
const findFilterObj = () => {
	const idx = location.href.indexOf('filter');
	let o = null;
	if (idx > -1) {
		const str = location.href.substr(location.href.indexOf('?') + 1);
		const param = new URLSearchParams(str);
		o = JSON.parse(param.get('filter') || '{}');
	}
	return o;
};
function NewTable({ columns, routePrefix, category, history, taskType, className }) {
	const standFilter = {
		page: 1,
		limit: 10,
		taskCategory: (category === 'ssl' || category === 'vul') ? 'weakness' : category,
		taskType: (category === 'ssl' || category === 'vul') ? category : '',
		targetSearch: '',
		taskTriggerType: '',
		startTime: '',
		endTime: '',
	};
	const obj = findFilterObj();
	let params;
	if (getParams()) {
		const p = getParams();
		params = { ...standFilter, ...p, ...obj };
		if (params.createTimeGTE) {
			params.startTime = params.createTimeGTE;
		}
		if (params.createTimeLTE) {
			params.endTime = params.createTimeLTE;
		}
		if (params.filter) {
			delete params.filter;
		}
	} else {
		params = standFilter;
	}
	const [type, setType] = React.useState('empty')
	const [filter, setFilter] = React.useState(params);
	const [tableData, setTableData] = useState([])
	const [loading, setLoading] = useState(false)
	const [total, setTotal] = useState(0)
	const getData = (filter) => {
		setLoading(true)
		queryGQLBuilder(filter).then(res => {
			if (res.code === 200) {
				setTableData(res?.data?.items)
				setTotal(res?.data?.count)
			}
		}).finally(() => {
			setLoading(false)
		})
	}
	React.useEffect(() => {
		if (taskType) {
			const search = searchStringBuilder({
				filter: JSON.stringify({
					taskType: taskType,
				}),
				page: 1,
				limit: 10,
			});
			history.replace(`${routePrefix}?${search}`);
		}
		getData({...filter, ...params})
	}, []);
	React.useEffect(() => {
		if (!loading) setType('img')
	}, [loading])

	useEffect(() => {
		if (JSON.stringify(filter) !== JSON.stringify({...filter, ...params})) {
			getData({...filter, ...params})
			setFilter({...filter, ...params})
		}
	}, [params])

	const pageChange = (page, pageSize) => {
		const filt = findFilterObj();
		const search = searchStringBuilder({
			filter: JSON.stringify({
				...filt,
			}),
			page,
			limit: pageSize,
		});
		const obj = Object.assign({}, filter, filt);
		obj.page = page;
		obj.limit = pageSize;
		setFilter(obj);
		getData({ ...obj });
		history.replace(`${routePrefix}?${search}`);
	};

	return (
		<div className={cn(s.mt1rem, className)}>
			<Table
				columns={columns}
				data={tableData}
				pro
				loading={loading}
				empty={<EmptyData type={type} className={s.nobor} />}
			/>
			{total > 10 && (
				<div className={s.df}>
					<Pagination
						current={filter?.page}
						pageSize={filter?.limit}
						pageSizeOptions={[10, 20, 50]}
						showSizeChanger
						showQuickJumper
						showTotal={total => `共${total}条`}
						total={total}
						onChange={pageChange}
					/>
				</div>
			)}
		</div>
	);
}
NewTable.propTypes = {
	columns: PropTypes.array,
	routePrefix: PropTypes.string,
	category: PropTypes.string,
	history: PropTypes.object,
	taskType: PropTypes.string,
};

export default NewTable;
